<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="150px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<el-col :span="12">
					<el-form-item label="储罐名称" prop="cgmc" required >
						<el-input v-model="dataForm.cgmc" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属罐区" prop="ssgqhzz" required >
						<el-select v-model="dataForm.ssgqhzz" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in ssgqhzzOptions" :key="index" :label="item.CGQMC" :value="item.ID" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="储罐编号" prop="cgwh" required >
						<el-input v-model="dataForm.cgwh" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="储罐容积" prop="cgmj" required >
						<el-input v-model="dataForm.cgmj" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="储罐形式" prop="cgxs" required >
						<el-select v-model="dataForm.cgxs" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in cgxsOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="储罐结构" prop="cgjg" required >
						<el-select v-model="dataForm.cgjg" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in cgjgOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="储罐位置分类" prop="cgwzfl" required >
						<el-select v-model="dataForm.cgwzfl" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in cgwzflOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="存储介质" prop="ccjz" required >
						<el-input v-model="dataForm.ccjz" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="危险货物编号" prop="wxhwbh" required >
						<el-input v-model="dataForm.wxhwbh" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="物质状态" prop="wzzt" required >
						<el-input v-model="dataForm.wzzt" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="物质类别" prop="wzlb" required >
						<el-input v-model="dataForm.wzlb" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="设计储量" prop="sjcl" required >
						<el-input v-model="dataForm.sjcl" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="设计压力" prop="sjyl" required >
						<el-input v-model="dataForm.sjyl" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="操作压力上限" prop="czylsx" required >
						<el-input v-model="dataForm.czylsx" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属部门" prop="ssbm" required >
						<el-select filterable v-model="dataForm.ssbm" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in ssbmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="操作温度上限" prop="czwdsx" required >
						<el-input v-model="dataForm.czwdsx" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="实际操作压力" prop="sjczyl" >
						<el-input v-model="dataForm.sjczyl" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="操作温度" prop="sjczwd" >
						<el-input v-model="dataForm.sjczwd" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="工作温度区间" prop="gzwdqj" required >
						<el-input v-model="dataForm.gzwdqj" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="设计液位高度" prop="sjywgd" required >
						<el-input v-model="dataForm.sjywgd" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="投产日期" prop="tcrq" required >
						<el-date-picker v-model="dataForm.tcrq" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="进出料方式" prop="jclfs" required >
						<el-input v-model="dataForm.jclfs" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="有无围堰" prop="ywwy" required >
						<el-select v-model="dataForm.ywwy" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in ywwyOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属重大危险源编码" prop="sswxhxpzdwxydy" required >
						<el-select v-model="dataForm.sswxhxpzdwxydy" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in sswxhxpzdwxydyOptions" :key="index" :label="item.ZDWXYMC" :value="item.ID" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="围堰所围面积" prop="wyswmj" >
						<el-input v-model="dataForm.wyswmj" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="经度（度）" prop="jd" required >
						<el-input v-model="dataForm.jd" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="纬度（度）" prop="wd" required >
						<el-input v-model="dataForm.wd" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>

				<!--  -->
				<el-col :span="12">
					<el-form-item label="平均温度" prop="pjwd" >
						<el-input v-model="dataForm.pjwd" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="实时液位高度" prop="ssywgd" >
						<el-input v-model="dataForm.ssywgd" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="高液位" prop="gyw" >
						<el-input v-model="dataForm.gyw" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="低液位" prop="dyw" >
						<el-input v-model="dataForm.dyw" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<!--  -->

				<el-col :span="24">
					<el-form-item label="现场照片" prop="xczp" required >
						<JNPF-UploadImg v-model="xczpList" accept="" :fileSize="20" sizeUnit="MB" :limit="9" >
						</JNPF-UploadImg>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注" prop="bz" >
						<el-input v-model="dataForm.bz" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
			</el-form>
			</el-row>
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
export default {
    data() {
      return {
        visible: false,
        isDetail: false,
        dataForm: {
					cgmc:undefined,
					ssgqhzz:undefined,
					cgwh:undefined,
					cgmj:undefined,
					cgxs:undefined,
					cgjg:undefined,
					cgwzfl:undefined,
					ccjz:undefined,
					wxhwbh:undefined,
					wzzt:undefined,
					wzlb:undefined,
					sjcl:undefined,
					sjyl:undefined,
					czylsx:undefined,
					ssbm:undefined,
					czwdsx:undefined,
					sjczyl:undefined,
					sjczwd:undefined,
					gzwdqj:undefined,
					sjywgd:undefined,
					tcrq:undefined,
					jclfs:undefined,
					ywwy:undefined,
					sswxhxpzdwxydy:undefined,
					wyswmj:undefined,
					jd:undefined,
					wd:undefined,
					// 
					pjwd:undefined,
					ssywgd:undefined,
					gyw:undefined,
					dyw:undefined,
					//
					xczp:[],
					bz:undefined,

        },
        rules: {
						cgmc:[
						{
							required:true,
							message:'请输入储罐名称',
							trigger:'blur'
						},
						],
						ssgqhzz:[
						{
							required:true,
							message:'请输入所属罐区',
							trigger:'blur'
						},
						],
						cgwh:[
						{
							required:true,
							message:'请输入储罐编号',
							trigger:'blur'
						},
						],
						cgmj:[
						{
							required:true,
							message:'请输入储罐容积',
							trigger:'blur'
						},
						],
						cgxs:[
						{
							required:true,
							message:'请输入储罐形式',
							trigger:'blur'
						},
						],
						cgjg:[
						{
							required:true,
							message:'请输入储罐结构',
							trigger:'blur'
						},
						],
						cgwzfl:[
						{
							required:true,
							message:'请输入储罐位置分类',
							trigger:'blur'
						},
						],
						ccjz:[
						{
							required:true,
							message:'请输入存储介质',
							trigger:'blur'
						},
						],
						wxhwbh:[
						{
							required:true,
							message:'请输入危险货物编号',
							trigger:'blur'
						},
						],
						wzzt:[
						{
							required:true,
							message:'请输入物质状态',
							trigger:'blur'
						},
						],
						wzlb:[
						{
							required:true,
							message:'请输入物质类别',
							trigger:'blur'
						},
						],
						sjcl:[
						{
							required:true,
							message:'请输入设计储量',
							trigger:'blur'
						},
						],
						sjyl:[
						{
							required:true,
							message:'请输入设计压力',
							trigger:'blur'
						},
						],
						czylsx:[
						{
							required:true,
							message:'请输入操作压力上限',
							trigger:'blur'
						},
						],
						ssbm:[
						{
							required:true,
							message:'请输入所属部门',
							trigger:'blur'
						},
						],
						czwdsx:[
						{
							required:true,
							message:'请输入操作温度上限',
							trigger:'blur'
						},
						],
						// sjczyl:[
						// {
						// 	required:true,
						// 	message:'请输入实际操作压力',
						// 	trigger:'blur'
						// },
						// ],
						// sjczwd:[
						// {
						// 	required:true,
						// 	message:'请输入实际操作温度',
						// 	trigger:'blur'
						// },
						// ],
						gzwdqj:[
						{
							required:true,
							message:'请输入工作温度区间',
							trigger:'blur'
						},
						],
						sjywgd:[
						{
							required:true,
							message:'请输入设计液位高度',
							trigger:'blur'
						},
						],
						tcrq:[
						{
							required:true,
							message:'请输入投产日期',
							trigger:'blur'
						},
						],
						jclfs:[
						{
							required:true,
							message:'请输入进出料方式',
							trigger:'blur'
						},
						],
						ywwy:[
						{
							required:true,
							message:'请输入有无围堰',
							trigger:'blur'
						},
						],
						sswxhxpzdwxydy:[
						{
							required:true,
							message:'请输入所属重大危险源编码',
							trigger:'blur'
						},
						],
						jd:[
						{
							required:true,
							message:'请输入经度（度）',
							trigger:'blur'
						},
						],
						wd:[
						{
							required:true,
							message:'请输入纬度（度）',
							trigger:'blur'
						},
						],
						xczp:[
						{
							required:true,
							message:'请输入现场照片',
							trigger:'blur'
						},
						],

        },
				ssgqhzzOptions:[],
				cgxsOptions:[{"fullName":"立式储罐","id":"立式储罐"},{"fullName":"卧式储罐","id":"卧式储罐"},{"fullName":"其他","id":"其他"}],
				cgjgOptions:[{"fullName":"固定顶储罐","id":"固定顶储罐"},{"fullName":"浮顶储罐","id":"浮顶储罐"},{"fullName":"球形储罐","id":"球形储罐"},{"fullName":"其他","id":"其他"}],
				cgwzflOptions:[{"fullName":"地上储罐","id":"地上储罐"},{"fullName":"地下储罐","id":"地下储罐"},{"fullName":"其他","id":"其他"}],
				ssbmOptions:[],
				ywwyOptions:[{"fullName":"无","id":"无"},{"fullName":"有","id":"有"}],
				sswxhxpzdwxydyOptions:[],

					xczpList:[],

      }
    },
    created() {
		this.getssgqhzzOptions();
		this.getssbmOptions();
		this.getsswxhxpzdwxydyOptions();

    },
    methods: {
		getssgqhzzOptions()
		{
			previewDataInterface('a6f8e154c3cc441f8c00233273bc68bf').then(res => {
				this.ssgqhzzOptions = res.data
			})
		},
		getssbmOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.ssbmOptions = res.data
			})
		},
		getsswxhxpzdwxydyOptions()
		{
			previewDataInterface('707f1102bce74818a551ebcfa88f2321').then(res => {
				this.sswxhxpzdwxydyOptions = res.data
			})
		},

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail) {

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            request({
              url: '/api/System/qyscCg/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{
              this.dataForm = res.data;
				this.xczpList = this.dataForm.xczp ? JSON.parse(this.dataForm.xczp) : [];

            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
				this.$set(this.dataForm, 'xczp', JSON.stringify(this.xczpList));

        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            if (!this.dataForm.id) {
              request({
                url: '/api/System/qyscCg',
                method: 'post',
                data: this.dataForm,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/System/qyscCg/' + this.dataForm.id,
                method: 'PUT',
                data: this.dataForm
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },

    }
  }
  </script>